Hvordan kontrollerer jeg, om et element er skjult i jQuery?

1
2
Næste
Da spørgsmålet henviser til et enkelt element, kan denne kode være mere passende:
// Kontrollerer CSS-indhold til visning: [none | block], ignorerer synlighed: [true | false]
$ (element) .is (": synlig");
// Det samme fungerer med skjult
$ (element) .is (": skjult");
Det er det samme som twernt's forslag, men anvendes på et enkelt element; og den matcher algoritmen, der anbefales i jQuery FAQ.
Vi bruger jQuery's is () til at kontrollere det valgte element med et andet element, en vælger eller et hvilket som helst jQuery-objekt. Denne metode krydser langs DOM-elementerne for at finde et match, der opfylder den passerede parameter. Det returnerer sandt, hvis der er en kamp, ​​ellers returneres falsk.
|
Du kan bruge den skjulte vælger:
// Matcher alle skjulte elementer
$ ('element: skjult')
Og den synlige vælger:
// Matcher alle synlige elementer
$ ('element: synlig')
|
hvis ($ (element) .css ('display') == 'none' || $ (element) .css ("synlighed") == "skjult") {
// 'element' er skjult
}
Ovenstående metode tager ikke hensyn til forældrenes synlighed. For at overveje forældren også, skal du bruge .is (": skjult") eller .is (": synlig").
For eksempel,

 Div2 

Ovenstående metode vil betragte div2 som synlig, mens: synlig ikke. Men ovenstående kan være nyttigt i mange tilfælde, især når du har brug for at finde ud af, om der er nogen fejldelinger synlige i den skjulte forælder, fordi under sådanne forhold: synligt fungerer ikke.
|
Ingen af ​​disse svar adresserer det, jeg forstår, er spørgsmålet, hvilket er det, jeg søgte efter, "Hvordan håndterer jeg emner, der har synlighed: skjult?". Hverken: synlig eller: skjult håndterer dette, da de begge leder efter visning i henhold til dokumentationen. Så vidt jeg kunne bestemme, er der ingen vælger til at håndtere CSS-synlighed. Sådan løste jeg det (standard jQuery-vælgere, der kan være en mere sammenfattet syntaks):
$ (". element"). hver (funktion () {
hvis ($ (dette) .css ("synlighed") == "skjult") {
// håndter ikke synlig tilstand
} andet {
// håndtere synlig tilstand
}
});
|
Fra hvordan bestemmer jeg tilstanden for et skiftet element?
Du kan bestemme, om et element er skjult eller ikke ved hjælp af: synlige og: skjulte vælgere.
var isVisible = $ ('# myDiv'). er (': synlig');
var isHidden = $ ('# myDiv'). er (': skjult');
Hvis du bare handler på et element baseret på dets synlighed, kan du bare inkludere: synlig eller: skjult i vælgerudtrykket. For eksempel:
$ ('# myDiv: synlig'). animer ({venstre: '+ = 200px'}, 'langsom');
|
Ofte når du kontrollerer, om noget er synligt eller ej, vil du straks gå lige foran og gøre noget andet med det. jQuery chaining gør det let.
Så hvis du har en vælger, og du kun vil udføre en handling på den, hvis den er synlig eller skjult, kan du bruge filter (": synlig") eller filter (": skjult") efterfulgt af at kæde det sammen med den handling, du vil tage.
Så i stedet for en if-erklæring, som denne:
hvis ($ ('# btnUpdate'). er (": synlig"))
{
$ ('# btnUpdate'). animere ({bredde: "skifte"}); // Skjul knap
}
Eller mere effektiv, men endnu grimere:
var knap = $ ('# btnUpdate');
hvis (button.is (": synlig"))
{
button.animate ({bredde: "skifte"}); // Skjul knap
}
Du kan gøre det hele på én linje:
$ ('# btnUpdate'). filter (": synlig"). animere ({bredde: "skifte"});
|
Den: synlige vælger i henhold til jQuery-dokumentationen:
De har en CSS-skærmværdi på ingen.
De er formelementer med type = "skjult".
Deres bredde og højde er udtrykkeligt indstillet til 0.
Et forfædreelement er skjult, så elementet vises ikke på siden.
Elementer med synlighed: skjult eller opacitet: 0 betragtes som synlige, da de stadig bruger plads i layoutet.
Dette er nyttigt i nogle tilfælde og ubrugeligt i andre, for hvis du vil kontrollere, om elementet er synligt (display! = Ingen), ignorerer forældrenes synlighed, vil du opdage, at det at gøre .css ("display") == 'none 'er ikke kun hurtigere, men vil også returnere synlighedskontrollen korrekt.
Hvis du vil kontrollere synligheden i stedet for at vise, skal du bruge: .css ("synlighed") == "skjult".
Tag også de ekstra jQuery-noter i betragtning:
Fordi: synlig er en jQuery-udvidelse og ikke er en del af CSS-specifikationen, kan forespørgsler, der bruger: synlig, ikke drage fordel af den præstationsforøgelse, der leveres af den native DOM querySelectorAll () -metode. For at opnå den bedste ydelse, når du bruger: synlig for at vælge elementer, skal du først vælge elementerne ved hjælp af en ren CSS-vælger og derefter bruge .filter (": synlig").
Også, hvis du er bekymret for ydeevne, skal du tjekke Nu ser du mig ... vis / skjul ydeevne (2010-05-04). Og brug andre metoder til at vise og skjule elementer.
|
Dette fungerer for mig, og jeg bruger show () og hide () til at gøre min div skjult / synlig:
hvis ($ (dette) .css ('display') == 'none') {
/ * din kode går her * /
} andet {
/ * alternativ logik * /
}
|
Hvordan elementets synlighed og jQuery fungerer;
Et element kunne skjules med displayet: ingen,synlighed: skjult eller uigennemsigtighed: 0. Forskellen mellem disse metoder:
display: ingen skjuler elementet, og det tager ikke plads;
synlighed: skjult skjuler elementet, men det tager stadig plads i layoutet;
opacitet: 0 skjuler elementet som "synlighed: skjult", og det tager stadig plads i layoutet; den eneste forskel er, at opacitet lader en gøre et element delvis gennemsigtigt;
hvis ($ ('. target'). er (': skjult')) {
$ ('. target'). show ();
} andet {
$ ('. target'). skjul ();
}
hvis ($ ('. target'). er (': synlig')) {
$ ('. target'). skjul ();
} andet {
$ ('. target'). show ();
}
hvis ($ ('. målsynlighed'). css ('synlighed') == 'skjult') {
$ ('. målsynlighed'). css ({
synlighed: "synlig",
Skærm: ""
});
} andet {
$ ('. målsynlighed'). css ({
synlighed: "skjult",
Skærm: ""
});
}
if ($ ('. target-visibility'). css ('opacity') == "0") {
$ ('. målsynlighed'). css ({
uigennemsigtighed: "1",
Skærm: ""
});
} andet {
$ ('. målsynlighed'). css ({
uigennemsigtighed: "0",
Skærm: ""
});
}
Nyttige jQuery-skiftmetoder:
$ ('. klik'). klik (funktion () {
$ ('. target'). skift ();
});
$ ('. klik'). klik (funktion () {
$ ('. target'). slideToggle ();
});
$ ('. klik'). klik (funktion () {
$ ('. target'). fadeToggle ();
});
|
Du kan også gøre dette ved hjælp af almindelig JavaScript:
funktion erRendered (domObj) {
hvis ((domObj.nodeType! = 1) || (domObj == document.body)) {
returner sandt
}
hvis (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["synlighed"]! = "skjult") {
return isRendered (domObj.parentNode);
} ellers hvis (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("synlighed")! = "skjult") {
return isRendered (domObj.parentNode);
}
}
returner falsk;
}
Bemærkninger:
Fungerer overalt
Arbejder for indlejrede elementer
Fungerer til CSS og inline-stilarter
Kræver ikke en ramme
|
Jeg vil bruge CSS-klasse .hide {display: none! Important; }.
For at skjule / vise kalder jeg .addClass ("skjul") /. RemoveClass ("skjul"). For at kontrollere synligheden bruger jeg .hasClass ("skjul").
Det er en enkel og klar måde at kontrollere / skjule / vise elementer på, hvis du ikke planlægger at bruge .toggle () eller .animate () metoder.
|
Demolink
$ ('# clickme'). klik (funktion () {
$ ('# bog'). skift ('langsom', funktion () {
// Animation fuldført.
alarm ($ ('# book'). er (": synlig")); // <--- SAND hvis synlig falsk hvis skjult
});
});


Klik her


Kilde:
Blogger Plug n Play - jQuery-værktøjer og widgets: Sådan ser du, om elementet er skjult eller synligt ved hjælp af jQuery
|
Man kan simpelthen bruge den skjulte eller synlige attribut, som:
$ ('element: skjult')
$ ('element: synlig')
Eller du kan forenkle det samme med er som følger.
$ (element) .is (": synlig")
|
ebdiv skal indstilles til style = "display: none;". Det fungerer både til at vise og skjule:
$ (dokument). klar (funktion () {
$ ("# eb"). klik på (funktion () {
$ ("# ebdiv"). skift ();
});
});
|
Et andet svar, du skal tage i betragtning, er, at hvis du skjuler et element, skal du bruge jQuery, men i stedet for faktisk at skjule det fjerner du hele elementet, men du kopierer dets HTML-indhold og selve tagget til en jQuery-variabel og derefter alt hvad du skal gøre er at teste, om der er sådan et mærke på skærmen ved hjælp af den normale if (! $ ('# thetagname'). længde).
|
Når man tester et element mod: skjult selektor i jQuery, skal det overvejes, at et absolut placeret element kan genkendes som skjult, selvom deres underordnede elementer er synlige.
Dette virker i første omgang noget kontraintuitivt - selvom det at se nærmere på jQuery-dokumentationen giver den relevante information:
Elementer kan betragtes som skjulte af flere grunde: [...] Deres bredde og højde er udtrykkeligt indstillet til 0. [...]
Så det giver faktisk mening med hensyn til boksmodellen og den beregnede stil for elementet. Selvom bredde og højde ikke er indstillet eksplicit til 0, kan de indstilles implicit.
Se på følgende eksempel:
console.log ($ ('. foo'). er (': skjult')); // sand
console.log ($ ('. bar'). er (': skjult')); // falsk
.foo {
position: absolut;
venstre: 10px;
top: 10 px;
baggrund: # ff0000;
}
.bar {
position: absolut;
venstre: 10px;
top: 10 px;
bredde: 20px;
højde: 20px;
baggrund: # 0000ff;
}


 

Opdatering til jQuery 3.x:
Med jQuery 3 vil den beskrevne adfærd ændre sig! Elementer betragtes som synlige, hvis de har layoutkasser, inklusive dem med nul bredde og / eller højde.
JSFiddle med jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Den samme JavaScript-kode vil så have denne output:
console.log ($ ('. foo'). er (': skjult')); // falsk
console.log ($ ('. bar'). er (': skjult'));// falsk
|
Dette fungerer muligvis:
forvent ($ ("# message_div"). css ("display")). toBe ("none");
|
Eksempel:
$ (dokument). klar (funktion () {
if ($ ("# checkme: hidden"). længde) {
console.log ('Skjult');
}
});


   Kategori: Fisk

 Produkt: Laksatlantisk

 Specie: Salmo salar

 form: bøffer

|
For at kontrollere, om det ikke er synligt, bruger jeg!:
hvis (! $ ('# bog'). er (': synlig')) {
advarsel ('# bog er ikke synlig')
}
Eller det følgende er også sam, der gemmer jQuery-vælgeren i en variabel for at få bedre ydelse, når du har brug for det flere gange:
var $ book = $ ('# book')
hvis (! $ book.is (': synlig')) {
advarsel ('# bog er ikke synlig')
}
|
Brug klasseskift, ikke stilredigering. . .
Brug af klasser, der er udpeget til at "skjule" elementer, er let og også en af ​​de mest effektive metoder. Skift af en klasse 'skjult' med en skærmstil på 'ingen' fungerer hurtigere end at redigere den stil direkte. Jeg forklarede noget af dette temmelig grundigt i Stack Overflow-spørgsmål Drejning af to elementer, der er synlige / skjulte i samme div.
JavaScript bedste praksis og optimering
Her er en virkelig oplysende video af en Google Tech Talk af Google front-end engineer Nicholas Zakas:
Fremskynde dit Javascript (YouTube)
|
Eksempel på brug af den synlige kontrol for adblocker er aktiveret:
$ (dokument). klar (funktion () {
hvis (! $ ("# ablockercheck"). er (": synlig"))
$ ("# ablockermsg"). tekst ("Deaktiver adblocker."). show ();
});

 
 
"ablockercheck" er et ID, som adblocker blokerer. Så hvis du kontrollerer det, hvis det er synligt, kan du opdage, om adblocker er slået til.
|
Når alt kommer til alt passer intet af eksemplerne mig, så jeg skrev mine egne.
Tests (ingen understøttelse af Internet Explorer-filter: alpha):
a) Kontroller, om dokumentet ikke er skjult
b) Kontroller, om et element har nul bredde / højde / opacitet eller skærm: ingen / synlighed: skjult i indbyggede stilarter
c) Kontroller, om elementets centrum (også fordi det er hurtigere end at teste hver pixel / hjørne) ikke er skjult af andet element (og alle forfædre, eksempel: overløb: skjult / rul / et element over et andet) eller skærmkanter
d) Kontroller, om et element har nul bredde / højde / opacitet eller skærm: ingen / synlighed: skjult i beregnede stilarter (blandt alle forfædre)
Testet den
Android 4.4 (Native browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 dokumenttilstande + Internet Explorer 8 på en virtuel maskine) og Safari (Windows / Mac / iOS).
var is_visible = (funktion () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHøjde - 1: 0,
relativ = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
funktion indeni (barn, forælder) {
mens (barn) {
hvis (barn === forælder) returnerer sandt;
barn = child.parentNode;
}
returner falsk;
};
returfunktion (elem) {
hvis (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'skjult' ||
elem.style.display == 'ingen' ||
elem.style.opacity === 0
) returnere falsk;
var rect = elem.getBoundingClientRect ();
hvis (relativ) {
hvis (! inde (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) returnere false;
} ellers hvis (
! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) returnere falsk;
hvis (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
mens (el) {
hvis (el === dokument) {break;} ellers hvis (! el.parentNode) returnerer false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
hvis (comp && (comp.visibility == 'skjult' || comp.display == 'none' || (type af comp.opacity! == 'udefineret' && comp.opacity! = 1))) returneres false;
el = el.parentNode;
}
}
returner sandt
}
}) ();
Sådan bruges:
is_visible (elem) // boolsk
|
Du skal kontrollere både ... Skærm såvel som synlighed:
if ($ (this) .css ("display") == "none" || $ (this) .css ("synlighed") == "skjult") {
// Elementet er ikke synligt
} andet {
// Elementet er synligt
}
Hvis vi tjekker for $ (denne) .is (": synlig"), kontrollerer jQuery automatisk for begge ting.
|
Måske kan du gøre noget som dette
$ (dokument). klar (funktion () {
var synlig =$ ('# tElement'). er (': synlig');
hvis (synlig) {
alarm ("synlig");
// Kode
}
andet
{
alarm ("skjult");
}
});

 Fornavn 
|
Du skal blot kontrollere synligheden ved at tjekke for en boolsk værdi, som:
hvis (dette. skjult === falsk) {
// Din kode
}
Jeg brugte denne kode til hver funktion. Ellers kan du bruge is (': synlig') til at kontrollere synligheden af ​​et element.
|
Fordi elementer med synlighed: skjult eller opacitet: 0 betragtes som synlige, da de stadig bruger plads i layoutet (som beskrevet for jQuery: synlig vælger) - kan vi kontrollere, om elementet virkelig er synligt på denne måde:
funktion isElementReallyHidden (el) {
returner $ (el) .is (": skjult") || $ (el) .css ("synlighed") == "skjult" || $ (el) .css ('opacitet') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). hver (funktion () {
hvis (isElementReallyHidden (dette)) {
booElementReallyShowed = false;
}
});
|
Men hvad hvis elementets CSS er som følger?
.element{
position: absolut; venstre: -9999;
}
Så dette svar på Stack Overflow-spørgsmål Sådan skal du kontrollere, om et element er off-screen, bør også overvejes.
|
En funktion kan oprettes for at kontrollere synligheds- / displayattributter for at måle, om elementet vises i brugergrænsefladen eller ej.
function checkUIElementVisible (element) {
returnere ((element.css ('display')! == 'none') && (element.css ('synlighed')! == 'skjult'));
}
Working Fiddle
|
Her er også et ternært betinget udtryk for at kontrollere elementets tilstand og derefter skifte det:
$ ('someElement'). på ('klik', funktion () {$ ('elementToToggle'). er (': synlig')? $ ('elementToToggle'). skjul ('langsom'): $ ('elementToToggle ') .show (' langsom ');});
|
hvis ($ ('# postcode_div'). er (': synlig')) {
hvis ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). tekst ('\ u00a0');
} andet {
$ ('# spanPost'). tekst ($ ('# postcode_text'). val ());
}
|
1
2
Næste
Meget aktivt spørgsmål. Optjen 10 omdømme for at besvare dette spørgsmål. Omdømmekravet hjælper med at beskytte dette spørgsmål mod spam og ikke-svar-aktivitet.
Er det ikke det svar, du leder efter? Gennemse andre spørgsmål, der er tagget javascript jquery dom synlighed, eller stil dit eget spørgsmål.